<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./main.css" />
    <title>Raven导航</title>
  </head>
  <body>
    <div class="backdrop dis-none">
      <div id="dialog">
        <div class="dialog-title">修改快捷方式</div>
        <div class="dialog-input-wrapper">
          <div class="dialog-label">网址</div>
          <input id="inputSite" type="text" placeholder="something..." />
        </div>
        <div class="button-container">
          <span>
            <button class="delete">删除</button>
          </span>
          <span>
            <button class="cancel">取消</button>
            <button class="finish">完成</button>
          </span>
        </div>
      </div>
    </div>

    <main class="main">
      <div class="logo">Raven</div>
      <div class="search-wrapper">
        <input type="text" placeholder="在必应搜索" id="search-input" />
        <a class="search-icon" href="javascript:;">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-search"></use>
          </svg>
        </a>
      </div>
      <div class="collection">
        <div class="item-container" id="add">
          <div class="inner">
            <div class="mini-logo">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-add"></use>
              </svg>
            </div>
            <div class="title">
              <span>添加</span>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://at.alicdn.com/t/font_1958349_jhmjocgnj48.js"></script>
    <script src="./main.js"></script>
  </body>
</html>
